<!-- 最新悬赏 -->
<template>
	<scroll-view class="bd" scroll-x="true" :scroll-with-animation="true">
		<view class="item-wraper">
			<navigator class="item" v-for="(item,index) in list" :key="index" :url="`/subpages/task/detail/detail?id=${item.taskid}&mid=${item.publisher_mid}`" :hover-stop-propagation="true">
				<view class="title">
					<text>{{item.title}}</text>
				</view>
				<view class="status">
					<text :class="['task-status',taskStatusClassName(item.task_status)]">{{taskStatus(item.task_status,item.dealt_status)}}</text>
					<text class="time">{{item.deadline}}截止</text>
				</view>
			</navigator>
		</view>
	</scroll-view>
</template>
<script setup>
	defineProps({
		list: Array
	});
	const TASK_STATUS = {
		task: {
			ongoing: 1, //进行中
			completed: 2, //已完成
			closed: [31, 32] //已关闭（发布者/管理员关闭）
		}
	};
	// 任务状态
	function taskStatus(v, v2) {
		if (TASK_STATUS.task.closed.indexOf(+v2) > -1) return '已关闭';
		switch (+v) {
			case TASK_STATUS.task.ongoing:
				return '进行中';
			case TASK_STATUS.task.completed:
				return '已完成';
		}
	}
	// 根据状态获取className
	function taskStatusClassName(v) {
		switch (+v) {
			case TASK_STATUS.task.completed:
				return 'task-status-completed';
		}
	}
</script>
<style scoped lang="scss">
	@import '@/common/css/base.scss';
	$w:694rpx;
	@mixin common {
		width: $w;
		margin: 0 auto 28rpx;
		box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, .08);
		border-radius: 18rpx;
		background-color: #fff;
	}
	.bd {
		width: 100%;
		margin: 30rpx 0 0 0;
		box-sizing: border-box;
		.item-wraper {
			@include flex;
			flex-wrap: nowrap;
		}
		.item {
			width: 494rpx;
			height: 204rpx;
			margin-left: 28rpx;
			padding: 22rpx;
			border: 1px solid #ECECEC;
			border-radius: 12rpx;
			background: #F9F9F9;
			.title {
				width: 448rpx;
				height: 92rpx;
				line-height: 46rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				font-size: 30rpx;
				color: #333;
			}
			.status {
				@include flex;
				margin-top: 16rpx;
			}
			.task-status {
				display: inline-block;
				height: 44rpx;
				line-height: 44rpx;
				padding: 0 18rpx;
				border: 1px solid #53A849;
				border-radius: 6rpx;
				font-size: 22rpx;
				color: #53A849;
				&-completed {
					border-color: #aaa;
					color: #aaa;
				}
			}
			.time {
				font-size: 24rpx;
				color: #aaa;
			}
		}
	}
</style>
